<template>
    <mrc_ess_Popover ref="mrcEssPopoverRef" @open="emit('open')" @close="emit('close')" :openOnHover="props.openOnHover" :location="props.location" v-if="props.text">
        <template v-slot:btn>
            <slot name="btn"></slot>
        </template>
        <template v-slot:default>
            <div class="bg-tooltip-background-color text-white rounded-[5px] pt-[6px] pr-2 pl-2 pb-[6px] text-[12px] leading-[16px]" v-if="props.text && props.text != '#'">
                {{ props.text }}
            </div>
        </template>
    </mrc_ess_Popover>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const emit = defineEmits(["open", "close"]);
const mrcEssPopoverRef = ref<any>(null);
const props = defineProps({
    text: {
        type: [String, Number],
        default: ""
    },
    openOnHover: {
        type: Boolean,
        default: true
    },
    location: {
        type: String,
        default: "top left"
    }
})
/**
 * 关闭对话框
 */
 function close() {
    mrcEssPopoverRef.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopoverRef.value.open();
}
defineExpose({
    close,
    open
})
</script>

<style scoped>
.badge-number {
    right: 0;
    top: 0;
    transform: translate(60%, -60%);
    letter-spacing: 0.004em;
}
</style>
